<template>
  <div class="comprehensive">
    <div class="top-wrap">
      <div class="status">
        <div class="title">
          <div class="line"></div>
          <span>仪表状态 </span>
        </div>
        <ul class="ul">
          <li class="li">
            <div class="msg">
              <div class="name">仪表总数</div>
              <div class="val">3790</div>
            </div>
            <img src="./images/yibiao.png" alt="" />
          </li>
          <li class="li">
            <div class="msg">
              <div class="name">在线数量</div>
              <div class="val">3000</div>
            </div>
            <img src="./images/online.png" alt="" />
          </li>
          <li class="li">
            <div class="msg">
              <div class="name">离线数量</div>
              <div class="val">30</div>
            </div>
            <img src="./images/outline.png" alt="" />
          </li>
          <li class="li">
            <div class="msg">
              <div class="name">故障数量</div>
              <div class="val">0</div>
            </div>
            <img src="./images/guzhang.png" alt="" />
          </li>
          <li class="li">
            <div class="msg">
              <div class="name">欠费数量</div>
              <div class="val">7</div>
            </div>
            <img src="./images/qianfei.png" alt="" />
          </li>
          <li class="li">
            <div class="msg">
              <div class="name">欠费数量</div>
              <div class="val">37</div>
            </div>
            <img src="./images/tingyong.png" alt="" />
          </li>
        </ul>
      </div>
      <div class="fee-detail">
        <div class="title-wrap search-wrap">
          <div class="title">
            <div class="line"></div>
            <span>缴费概况</span>
          </div>
          <el-select
            v-model="value"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="chart-title">
          <div class="icon"></div>
          <span>今年缴费金额：10000元</span>
        </div>
        <Barchart />
      </div>
    </div>
    <div class="btm-wrap">
      <div class="line-chart">
        <div class="title-wrap search-wrap">
          <div class="title">
            <div class="line"></div>
            <span>当日逐时用水曲线</span>
          </div>
          <div class="right">
            <el-date-picker
              v-model="params.value1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :size="size"
            />
            <el-button :icon="Search" type="primary" @click="getList"
              >查询</el-button
            >
          </div>
        </div>
        <LineChart />
      </div>
      <div class="pie-chart">
        <div class="title">
          <div class="line"></div>
          <span>用水概况 </span>
        </div>
        <Piechart />
        <ul class="btm-msg">
          <li>
            <div class="cir"></div>
            <span>当日</span>
          </li>
          <li>
            <div class="cir"></div>
            <span>昨日</span>
          </li>
          <li>
            <div class="cir"></div>
            <span>环比</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import Barchart from "./components/barchart";
import LineChart from "./components/linechart";
import Piechart from "./components/piechart";
let showDiaLog = ref(false);
let selVal = ref(1);
let diaForm = reactive({});
let params = reactive({});
let value  =ref('1')
const defaultProps = {
  children: "children",
  label: "label",
};
let total = ref(1);
let tableItem = ref([
  {
    prop: "date",
    label: "表号",
  },
  {
    prop: "date",
    label: "区域",
  },
  {
    prop: "date",
    label: "房间",
  },
  {
    prop: "date",
    label: "户名",
  },

  {
    prop: "date",
    label: "联系电话",
  },
  {
    prop: "date",
    label: "日期",
  },
  {
    prop: "date",
    label: "扣费金额",
  },
]);
const options = [
  {
    value: "1",
    label: "本年",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const tableData = [
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },

  {
    date: "基波电压(V)",

    name: "基波电流",
  },
];
let getList = () => {};
let handleNodeClick = (e) => {
  showDiaLog.value = true;
};

const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.comprehensive {
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  .top-wrap {
    display: flex;
    .status {
      width: 554px;
      height: 412px;
      background: #022657;
      .title {
        display: flex;
        align-items: center;
        padding: 20px 0 0 22px;
        .line {
          width: 7px;
          height: 22px;
          background: #61c8ff;
          border-radius: 4px;
          margin-right: 13px;
        }
        span {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 24px;
          color: #feffff;
        }
      }
      .ul {
        display: flex;
        flex-wrap: wrap;
        padding: 28px 53px 0 41px;
        justify-content: space-between;
        .li:nth-of-type(1) {
          margin-top: 0px !important;
          .msg {
            .val {
              color: #ffffff;
            }
          }
        }
        .li:nth-of-type(2) {
          margin-top: 0px !important;
          .msg {
            .val {
              color: #61c8ff;
            }
          }
        }
        .li:nth-of-type(3) {
          .msg {
            .val {
              color: #a273ff;
            }
          }
        }
        .li:nth-of-type(4) {
          .msg {
            .val {
              color: #ffda1c;
            }
          }
        }
        .li:nth-of-type(5) {
          .msg {
            .val {
              color: #61ff7f;
            }
          }
        }
        .li:nth-of-type(6) {
          .msg {
            .val {
              color: #ff1c1c;
            }
          }
        }
        .li {
          background: url("./images/status-bgc.png") no-repeat;
          background-size: 100% 100%;
          width: 213px;
          height: 93px;
          margin-top: 19px;
          display: flex;
          align-items: center;
          padding: 0 11px 0 23px;
          justify-content: space-between;
          .msg {
            display: flex;
            flex-direction: column;
            .name {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
            }
            .val {
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 35px;
              color: #61c8ff;
              margin-top: 11px;
            }
          }
          img {
            width: 59px;
            height: 59px;
          }
        }
      }
    }
    .fee-detail {
      height: 412px;
      background: #022657;
      width: 1058px;
      margin-left: 8px;
      position: relative;
      .chart-title {
        position: absolute;
        display: flex;
        align-items: center;
        left: 50%;
        transform: translateX(-50%);
        top: 60px;
        .icon {
          margin-right: 17px;
          width: 13px;
          height: 13px;
          background: #61c8ff;
        }
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
        }
      }
      .title-wrap {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding-right: 30px;

        .title {
          display: flex;
          align-items: center;
          padding: 21px 0 0 22px;
          .line {
            width: 7px;
            height: 22px;
            background: #61c8ff;
            border-radius: 4px;
            margin-right: 13px;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 24px;
            color: #feffff;
          }
        }
      }
    }
  }
  .btm-wrap {
    width: 455px;
    margin-top: 8px;
    height: 357px;
    display: flex;

    .pie-chart {
      width: 455px;
      margin-left: 7px;
      height: 357px;
      background: #022757;
      position: relative;
      .btm-msg {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 21px;
        left: 62px;
        li:nth-of-type(1) {
        
          .cir {
            background: #b48eff;
          }
        }
        li:nth-of-type(2) {
          margin-left: 83px;
          .cir {
            background: #FF7070;
          }
        }
        li:nth-of-type(3) {
          margin-left: 83px;
          .cir{

            background: #61c8ff;
          }
        }
        li {
          display: flex;
          align-items: center;
          .cir {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            margin-right: 8px;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 18px;
            color: #feffff;
          }
        }
      }
      .title {
        display: flex;
        align-items: center;
        padding: 21px 0 0 22px;
        .line {
          width: 7px;
          height: 22px;
          background: #61c8ff;
          border-radius: 4px;
          margin-right: 14px;
        }
        span {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 24px;
          color: #feffff;
        }
      }
    }
    .line-chart {
      width: 1156px;
      height: 357px;
      background: #022757;
      .title-wrap {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding-right: 35px;
        .right {
          display: flex;
          align-items: center;
          /* width: 200px; */
          :deep(.el-button) {
            width: 84px;
            height: 35px;
            background: rgba(27, 168, 255, 0.35);
            border: 1px solid #61c8ff;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #fefefe;
            border-radius: 0px;
            margin-left: 21px;
            svg {
              width: 50px !important;
              height: 17px !important;
            }
          }
        }
        .title {
          display: flex;
          align-items: center;
          padding: 21px 0 0 22px;
          .line {
            width: 7px;
            height: 22px;
            background: #61c8ff;
            border-radius: 4px;
            margin-right: 13px;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 24px;
            color: #feffff;
          }
        }
      }
    }
  }
}
</style>
